import React, { Component } from 'react'
import { Layout } from 'antd'
import {Route} from 'react-router-dom'
import About from '../About'
import Home from '../Home'
import Title from '../../components/Title'
import MyNavLink from '../../components/MyNavLink'

export default class Navigation extends Component {
  render() {
    const { Header, Sider, Content } = Layout
    const Style = {
      headerStyle: {
        textAlign: 'center',
        color: '#fff',
        height: 64,
        paddingInline: 50,
        lineHeight: '64px',
        backgroundColor: '#7dbcea',
      },
      contentStyle: {
        textAlign: 'center',
        minHeight: 120,
        lineHeight: '120px',
        color: '#fff',
        backgroundColor: '#108ee9',
      },
      siderStyle:{
        textAlign: 'center',
        lineHeight: '120px',
        color: '#fff',
        backgroundColor: '#3ba0e9',
      }
    }

    return (
      // <div className='list-group'>
      //   {/* html原生跳转 */}
      //   {/* <a className='list-group-item' href="./home.html">Home</a>
      //   <a className='list-group-item' href="./about.html">About</a> */}

      //   {/* react 路由链接 Link 跳转 */}
      //     <Link className='list-group-item' to="/home">Home</Link>
      //     <Link className='list-group-item' to="/about">About</Link>
      //   <div className="panel-body">
      //     <Route path='/home' component={Home}/>
      //     <Route path='/about' component={About}/>
      //   </div>
      // </div>
      <Layout>
        <Sider style={Style.siderStyle}>
          <MyNavLink to='/Home'>Home</MyNavLink>
          <MyNavLink to='/About'>About</MyNavLink>
        </Sider>
        <Layout>
          <Header style={Style.headerStyle}>
            <Title />
          </Header>
          <Content style={Style.contentStyle}>
            <Route path='/home' component={Home}/>
            <Route path='/about' component={About}/>
          </Content>
        </Layout>
      </Layout>
    )
  }
}
